<template>
	<view>
		<u-navbar title="设置" autoBack fixed placeholder></u-navbar>
		<view class="content">
			<view class="menus">
				<view class="account">
					<text>账号</text>
					<view class="menu-item">
						<u-cell v-for="(menu, index) in menus1" :key="index" :label="menu.desc" isLink @click="goMenu(menu)">
							<template #title>
								<view class="menu_title">{{ menu.text }}</view>
							</template>
						</u-cell>
					</view>
				</view>
				<view class="notice">
					<text>通知</text>
					<view class="menu-item">
						<u-cell v-for="(menu, index) in menus2" :key="index" @click="goMenu(menu)">
							<template #title>
								<view class="menu_title">{{ menu.text }}</view>
							</template>
							<template #value>
								<u-switch :value="menu.value" activeColor="#00a679" :size="20" @change="changeSet(index, menu)"></u-switch>
							</template>
						</u-cell>
					</view>
				</view>
				<view class="other">
					<text>关于</text>
					<view class="menu-item">
						<u-cell v-for="(menu, index) in menus3" :key="index" isLink @click="goMenu(menu)">
							<template #title>
								<view class="menu_title">{{ menu.text }}</view>
							</template>
						</u-cell>
					</view>
				</view>
			</view>
		</view>

		<u-toast position="bottom" ref="toast"></u-toast>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				menus1: [
					{
						text: '账号与安全',
						url: '/pages/tab4/set/safe/index',
					}, {
						text: '基础信息',
						url: '/pages/tab4/set/base/index'
					},
				],
				menus2: [
					{
						text: '新消息通知',
						value: false,
					}, {
						text: '接受评论通知',
						value: false
					}, {
						text: '接受点赞通知',
						value: false
					}
				],
				menus3: [
					{
						text: '服务协议',
						url: '/pages/tab4/set/service/index'
					}, {
						text: '隐私政策',
						url: '/pages/tab4/set/privacy/index'
					}, {
						text: '发帖规范',
						url: '/pages/tab4/set/ftgf/index'
					}, {
						text: '处罚标准',
						url: '/pages/tab4/set/cfbz/index'
					}
				],
			}
		},
		computed: {
			...mapGetters(['notice', 'comment', 'like'])
		},
		created() {

		},
		methods: {
			init() {
				this.menus2[0].value = this.notice
				this.menus2[1].value = this.comment
				this.menus2[2].value = this.like
			},
			goMenu(menu) {
				uni.navigateTo({
					url: menu.url
				})
			},
			changeSet(index, menu) {
				this.menus2[index].value = !menu.value
				const params = []
				this.menus2.forEach(item => {
					params.push(item.value)
				})
				this.$store.dispatch('primarySet', params)
			}
		}
	}
</script>

<style scoped lang="scss">
	.menus {
		width: 100%;

		& > view {
			width: auto;
			margin: 20px;
		}

		text {
			padding:0 10px 10px;
			color: #666666;
		}

		.menu-item {
			margin-top: 5px;
			border-radius: 6px;
			overflow: hidden;

			&::v-deep .u-cell {

				.u-line {
					width: auto !important;
					margin-left: 15px !important;
				}
			}

			&::v-deep .u-cell:last-child {
				.u-line {
					display: none !important;
				}
			}
		}

		.menu_title {
			width: 100%;
		}
		
	}

	.btn {
		width: 100%;
		margin: 10px auto;
		padding: 10px 0;
		background-color: #ffffff;
		color: #ff5500;
		font-size: 16px;
		text-align: center;
	}
</style>
